body {
  font-size: var(--fs-300);
  font-weight: 500;
  font-family: 'Barlow', sans-serif;
  color: var(--clr-indigo);
}

h1,
h2,
h3,
h4,
h5 {
  font-stretch: 100%;
  line-height: 1.2;
  font-weight: 700;
}

h1,
.h1 {
  font-size: var(--fs-800);
}

h2,
.h2 {
  font-size: var(--fs-700);
}

h3,
.h3 {
  font-size: var(--fs-600);
}

h4,
.h4 {
  font-size: var(--fs-500);
}

h5,
.h5 {
  font-size: var(--fs-400);
}

small,
.text-small {
  font-size: var(--fs-400);
}

strong {
  font-weight: 700;
}

a {
  color: var(--clr-primary-200);
  text-decoration: underline;

  &:hover,
  &:focus {
    text-decoration: none;
    color: var(--clr-primary-300);
  }
}

blockquote {
  background-color: hsla(50, 100%, 70%, 0.3);
  border-left: 9px solid hsl(50, 100%, 70%);
  padding: 20px 45px 20px 26px;
  margin-block: 1.5em;
}